<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/styles/style.css">
  <title>RuSPAS</title>
</head>
<body style="background-color: #f0f0f0, position: relative">
  <div class="login-div">
    <div style="text-align: center;font-size: 20px;font-weight: bold;color: black;margin-bottom: 50px">Rule-based Screening of Potential Allergen Sequences (RuSPAS)</div>
    <!--<div class="login-div-title">Log In</div>-->
    <div class="login-div-form">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">Username:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="username" placeholder="username">
          </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">Password:</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="password">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox" onclick="change_checked(this)"> Remember this log information
              </label>
            </div>
          </div>
        </div>
        <div style="color: red;margin-left: 100px;margin-bottom: 10px;font-weight: bold;display: none;" id="return-message"></div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <!--<button  class="btn btn-primary" onclick="send_message();">Login</button>-->
            <a href="#" class="btn btn-primary" onclick="send_message()">Log In</a>
          </div>
        </div>
      </form>
      <div style="text-align: center;font-weight: normal;margin-top: 40px;color: grey;">Copyright 2015  Produced by AccuraScience, Monsanto and Syngenta. All Rights Reserved.</div>
    </div>
  </div>
  <div class="zyc"></div>
  <div class="doing text-center">
    <img src="images/big.gif" alt="gif">
    <p style="color: white">It's working,please wait…</p>
  </div>

<script src="/js/jquery-2.1.4.min.js"></script>
  <script src="/js/jquery.cookie.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="/js/Component.js"></script>

  <script>
    var checked = false;
    $(function(){
      $(document).on("keydown",function(){//如果username和password的表单填写完整，那么点击回车键就会登录。
        if(event.keyCode == 13 && !check_empty("password") && !check_empty("username")){
          send_message();
        }else{
          //什么都不做
        }
      });
      set_form();//页面加载完成后执行看看是不是有了需要记住的账号密码,是的话就自动填充，没有的话就什么都不做
      //set_login_div_position();//设置表单div的位置，使其上下左右都居中
      /*$(window.document).on("click",function(){
        window.location.href = "http://www.baidu.com";
      });*/
    });
    function set_login_div_position(){
      var obj = $(".login-div");
      var self_width = parseInt(obj.css("width"));
      var self_height = parseInt(obj.css("height"));
      var client_height = $(window.document).height();
      var client_width = $(window.document).width();
      var self_top = (client_height - self_height) / 2;
      var self_left = (client_width - self_width) / 2;
      obj.css("top",self_top+"px");
      obj.css("left",self_left+"px");
    }
    function send_message(){
      //alert(12);
      var username = $("#username").val();
      var password  = $("#password").val();
      var login_message = {
        name:username,
        password:password
      };
      //alert(login_message.name);
      $.ajax({
        url:"/login",
        type:"post",
        dataType:"json",
        data:login_message,
        success:function(data){
            if(data.result === "SUCCESS"){
              //close_status_window(1000);
              //set_text("Login Success...");
              $.cookie("username",$("#username").val());
              if(checked){//如果勾选了记住密码的话那么久吧账号密码保存在cookie中
                var date = new Date();
                date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
                $.cookie("username",$("#username").val(),{ expires: date });
              }
              window.location.href = "main.html";//页面跳转
            }else if(data.result === "FAIL"){
              $("#return-message").show();
              $("#return-message").text("The username or password is not correct.");
              //close_status_window(1000);
              //set_text("The username or password is not correct...");
            }
        },
        error:function(err){
          //set_text("Connecting Error...");
          //close_status_window(1000);
        }
      });
      //open_status_window("Loging...");
    }
    function change_checked(aa){
      if(checked){
        checked = false;
      }else{
        checked = true;
      }
    }
    function set_form(){//设置表格的内容已经记录的用户名和密码
      var username = $.cookie("username");//从cookie获取账户名
      var password = $.cookie("password");//从cookie获取密码
      if(username && password){
        $("#username").val(username);//设置账号
        $("#password").val(password);//设置密码
      }else{
        //什么都不做
      }
    }
    function check_empty(dom_id){
      if($("#"+dom_id).val() === ""){
        return true;
      }else{
        return false;
      }
    }
  </script>
</body>
</html>
